<template>
    <div id="home">
        <nav-bar class="home-navbar">
            <div slot="center">购物街</div>
        </nav-bar>
        <tab-control ref="tabControl1"
                     @tabClick="tabClick"
                     :titles="['流行','新款','精选']"
                     v-show="isFixed"
                     class="tab-control" />
        <scroll class="content"
                ref="scroll"
                :probe-type="3"
                @scroll="contentScroll"
                :pull-up-load="true"
                @pullingUp="loadMore" >
            <home-swiper :banners="banners" @homeSwiperLoaded="homeSwiperLoaded"/>
            <recommend-view :recommends="recommends"/>
            <feature-view/>
            <tab-control ref="tabControl2"
                         @tabClick="tabClick"
                         :titles="['流行','新款','精选']"
                         :class="{fixed:isFixed}" />
            <goods-list :goods="showGoods"/>
        </scroll>

        <back-top @click.native="backTop" v-show="isShowBackTop"/>

    </div>
</template>

<script>
    import HomeSwiper from "./childComps/HomeSwiper"
    import RecommendView from "./childComps/RecommendView"
    import FeatureView from "./childComps/FeatureView"

    import NavBar from "components/common/navbar/NavBar"
    import Scroll from "components/common/scroll/Scroll"
    import TabControl from "components/content/tabControl/TabControl"
    import GoodsList from "components/content/goods/GoodsList"
    import BackTop from "components/content/backTop/BackTop"

    import {debounce} from "common/utils";
    import {
        getHomeMultidata,
        getHomeGoods
    } from "@/network/home";

    export default {
        name: "Home",
        components:{
            HomeSwiper,
            RecommendView,
            FeatureView,
            NavBar,
            TabControl,
            GoodsList,
            Scroll,
            BackTop
        },
        data(){
            return {
                banners:[],
                recommends:[],
                goods:{
                    'pop':{page:0,list:[]},
                    'new':{page:0,list:[]},
                    'sell':{page:0,list:[]}
                },
                currentType:'pop',
                isShowBackTop:false,
                tabOffSetTop:0,
                isFixed:false,
                saveY:0
            }
        },
        created(){
            this.getHomeMultidata()
            this.getHomeGoods('pop')
            this.getHomeGoods('new')
            this.getHomeGoods('sell')

        },
        mounted(){
            //监听图片加载
            const refresh = debounce(this.$refs.scroll.refresh,500)

            this.$bus.$on("imageLoad",()=>{
                refresh()
            })

        },
        activated(){
            this.$refs.scroll.scrollTo(0,this.saveY,1)
            this.$refs.scroll.refresh()
        },
        deactivated(){
            this.saveY = this.$refs.scroll.getScrollY()
        },
        computed:{
          showGoods(){
              return this.goods[this.currentType].list
          }
        },
        methods:{

            /**
             *事件监听相关方法
             */
            tabClick(index){
                switch (index) {
                    case 0:
                        this.currentType = "pop"
                        break
                    case 1:
                        this.currentType = "new"
                        break
                    case 2:
                        this.currentType = "sell"
                        break
                }
                this.$refs.tabControl1.currentIndex = index
                this.$refs.tabControl2.currentIndex = index
            },
            backTop(){
              this.$refs.scroll.scrollTo(0,0,500)
            },
            contentScroll(position){
                //1.判断backTop是否显示
                this.isShowBackTop = (-position.y) > 1000

                //2.判断tabScroll是否fixed
                this.isFixed = (-position.y) > this.tabOffSetTop
            },
            loadMore(){
              this.getHomeGoods(this.currentType)
            },
            homeSwiperLoaded(){
                this.tabOffSetTop = this.$refs.tabControl2.$el.offsetTop
            },

            /**
             * 网络请求相关方法
             */
            getHomeMultidata(){
                getHomeMultidata().then(res => {
                    this.banners = res.data.data.banner.list;
                    this.recommends = res.data.data.recommend.list;
                }).catch(err =>{
                    console.log('网络不太好 ---' + err);
                })
            },
            getHomeGoods(type){
                const page = this.goods[type].page + 1
                getHomeGoods(type,page).then(res => {
                    this.goods[type].list.push(...res.data.data.list);
                    this.goods[type].page += 1;

                    this.$refs.scroll.finishPullUp()
                }).catch(err =>{
                    console.log('网络不太好 ---' + err);
                })
            }
        }
    }
</script>

<style scoped>
    #home{
        padding-top: 44px;
        height: 100vh;
        position: relative;
    }
    .home-navbar{
        background-color: var(--color-tint);
        color: #fff;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 9;
    }
    .tab-control{
        position: relative;
        z-index: 9;
    }
    .content{
        overflow: hidden;
        position: absolute;
        top: 44px;
        bottom: 49px;
        left: 0;
        right: 0;
    }

</style>
